import { cssvar, DESIGN_DRAFT_HEIGHT, DRAFT_BASE_SCREEN_TYPE } from '../../postcss.config.js';
import { getUrlParam, getHashParam } from '@sutpc/zebra';
import { setConfig } from '@sutpc/config';
import { nextTick, onMounted, ref } from 'vue';
import { useResizeObserver } from '@vueuse/core';

export const useScale = ({ domRef }) => {
  const isAppReady = ref(false);

  const resetScale = () => {

    // 如果设计稿参照物是pc端，且当前是pc端，则缩放都是1
    // 如果设计稿参照物是pc端，当前是大屏端，则缩放要加上
    // 如果设计稿参照物是大屏端，当前是pc端，则缩放要减小
    // 如果设计稿参照物是大屏端，当前是大屏端，则缩放都是1
  
    const isCurrentInPc = window.innerWidth <= 1920;
    const isDraftTypePc = DRAFT_BASE_SCREEN_TYPE == 'pc';
  
    let commonScale = 1;
    let echartsScale = 1;
  
    if (!isCurrentInPc) {
      echartsScale = 1.12;
    }
  
    if (isDraftTypePc) {
      if (!isCurrentInPc) {
        commonScale = 1.2;
      }
    }
    else {
      if (isCurrentInPc) {
        commonScale = 0.85;
      }
    }
  
    // 如果某种分辨率需要特别大的，则可以这样写
    // if (window.innerWidth >= 5760 && window.innerWidth >= 1080) {
    //   commonScale = 1.6;
    // }
    
    // 允许在调试时，通过url传入scale参数缩放，以找到适合目标大屏的缩放比例
    const urlScale = getUrlParam('scale') || getHashParam('scale');
    if (urlScale) {
      commonScale = Number(urlScale);
    }
  
    let toScaleHeight = window.innerHeight;
    // if (window.innerHeight < DESIGN_DRAFT_HEIGHT) {
    //   toScaleHeight = window.innerHeight * 1.2;
    // }
  
    setConfig({
      // 业务代码中，凡是用设计稿的尺寸来写的，包括style echarts等，都使用config.sizeScale来做缩放
      // 比如某文字在设计稿是32px，则style的fontSize就是：32 * config.sizeScale + 'px'
      sizeScale: toScaleHeight / DESIGN_DRAFT_HEIGHT * commonScale,
      // 下面这个配置项请不要使用，它是给默认的echarts尺寸做缩放用的
      echarts: {
        /**
         * 1.1667 = 12 / 14，因为echarts的轴字体大小默认是12，在pc端屏幕看是合适的
         * 但是在大屏端需要放大一些，放大到差不多14像素，然后再做缩放，效果会更好
         **/ 
        sizeScale: toScaleHeight / 1080 * commonScale * echartsScale,
        fontSizeScale: toScaleHeight / 1080 * commonScale * echartsScale
      }
    })
    
    const rootFontSize = toScaleHeight / 10 * commonScale;
    // document.documentElement.style.fontSize = rootFontSize + 'px';
    domRef.value.style.setProperty(cssvar, rootFontSize + 'px');
  }

  onMounted(() => {

    resetScale();

    isAppReady.value = true;

    useResizeObserver(domRef.value, (entries) => {
      isAppReady.value = false;
      resetScale();
      nextTick(() => {
        isAppReady.value = true;
      });
    });

  });

  return {
    isAppReady,
    resetScale
  };
};
